<template>
	<view class="wallet-page bgimg1">
		<u-navbar :title="$t('hhh.t14')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>

		<view class="flex flex-column align-center">
			<text class="ftrgba1 fs-26">{{$t('hhh.t142')}}</text>
			<view class="mt-2">
				<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-40 h-40"></image>
				<text class="fs-60 font-weight-bold text-white ml-2">{{getUser.balance}}</text>
			</view>
		</view>
		<u-gap height="80" bgColor="transparent"></u-gap>
		<view class="rounded-top-lg bg-white p-3 flex flex-wrap justify-between ">
			<view class="bdcolor6 border w-32bf rounded-lg mb-3 py-4 w-100 flex flex-column align-center"
				v-for="(item,index) in payList" :key="index" :class="payIndex === index?'active':''" @tap="changePay(index)">
				<view class="flex align-center mb-2">
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-32 h-32"></image>
					<text class="fs-34 font-weight-bold ml-2">{{item.num}}</text>
				</view>
				<text class="ft666666 fs-24">${{item.money}}</text>
			</view>
		</view>

		<view class="border bdcolor6 rounded-lg px-2 py-1 mx-3">
			<u--input :placeholder="$t('hhh.t160')" type="digit" border="surround" v-model="amount" :customStyle="{
				'border':0
			}"></u--input>
		</view>

		<view class=" position-fixed bottom-0 left-0 right-0 mb-9">
			<view class="flex align-center mb-4 justify-center">
				<text class="check w-32 h-32" :class="checked?'checked':''" @tap="checked = !checked"></text>
				<view class="flex align-center ml-2 ft666666 fs-22">
					{{$t('hhh.t143')}}
					<text class="ft4A50CE text-underline ml-1">{{$t('hhh.t144')}}</text>
				</view>
			</view>
			<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold flex-1 mx-3"
				@tap="paywayShow = true">
				{{$t('hhh.t145')}}
			</view>
		</view>

		<u-picker :show="paywayShow" :columns="columns" itemHeight="88" keyName="name" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="paywayShow = false" @confirm="payConfirm"></u-picker>


		<u-modal :show="qrshow" :title="$t('hhh.t183')" :confirmText="$t('hhh.t24')" @confirm="cloeQr">
			<view class="slot-content">
				<image :src="qrUrl" mode="widthFix" style="width: 200px;height: 200px;"></image>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				checked: true,
				amount: '',
				payList: [{
					num: 100,
					money: 100
				}, {
					num: 200,
					money: 200
				}, {
					num: 500,
					money: 500
				}, {
					num: 600,
					money: 600
				}, {
					num: 800,
					money: 800
				}, {
					num: 1000,
					money: 1000
				}],
				payIndex: 0,
				paywayShow: false,
				columns: [],
				order_no: null,
				flag: false,
				qrshow: false,
				qrUrl: '',
				count: 0
			}
		},
		computed: {
			...mapGetters(['getUser'])
		},
		created() {
			this.channelsPay()
		},
		// onLoad(query) {
		// 	this.order_no = query.order_no
		// 	if (this.order_no) {
		// 		uni.showLoading({
		// 			title: this.$t('hhh.t182')
		// 		})
		// 		this.orderstatusPay()
		// 	}
		// },
		onShow() {
			if (this.order_no) {
				uni.showLoading({
					title: this.$t('hhh.t182')
				})
				this.orderstatusPay()
			}
		},
		beforeDestroy() {
			this.payTimer && clearTimeout(this.payTimer)
			this.payTimer = null
		},
		methods: {
			channelsPay() {
				HttpApi.channelsPay().then(res => {
					this.columns = [res.data]
				})
			},
			orderstatusPay() {
				HttpApi.orderstatusPay({
					order_no: this.order_no
				}).then(res => {
					if (res.code === 1) {
						const data = res.data
						if (data.status === 0) {
							this.count++
							if (this.count >= 20) {
								uni.tools.toast(this.$t('hhh.t186'))
								return
							}
							this.payTimer && clearTimeout(this.payTimer)
							this.payTimer = null
							this.payTimer = setTimeout(() => {
								this.orderstatusPay()
							}, 1000)
						} else {
							this.coun = 0
							uni.hideLoading()
							this.order_no = null
							if (data.status === 1) {
								uni.showToast({
									title: this.$t('hhh.t180')
								})
								this.userInfo()
							} else {
								uni.tools.toast(this.$t('hhh.t181'))
							}
						}
					}
				})
			},
			payConfirm(val) {
				if (this.flag) return
				this.flag = true
				uni.showLoading()
				HttpApi.rechargeCreate({
					amount: this.amount || this.payList[this.payIndex]['num'],
					payment_config_id: val.value[0]['id']
				}).then(res => {
					if (res.code === 1) {
						// const requestMethod = res.data.pay_data.RequestMethod
						// if (requestMethod === 'POST') {
						// 	const pay_data = res.data.pay_data
						// 	this.postToFiuu(pay_data)
						// } else {
						// 	const requestURL = res.data.pay_data.RequestURL
						// 	if (pay_url.includes('http')) {
						// 		window.location.href = pay_url;
						// 	}
						// }
						const payment_url = res.data.pay_data.payment_url
						if (payment_url.includes('http')) {
							window.location.href = payment_url;
						}
						this.order_no = res.data.order_no
						this.paywayShow = false

					}
				}).finally(() => {
					this.flag = false
					uni.hideLoading()
				})
			},
			postToFiuu(data) {
				const form = document.createElement('form');
				form.method = 'POST';
				form.action = data.RequestURL;
				console.log(data)
				const requestData = data.RequestData
				Object.keys(requestData).forEach(key => {
					const input = document.createElement('input');
					input.type = 'hidden';
					input.name = key; // 设置字段名
					input.value = requestData[key]; // 设置字段值
					form.appendChild(input);

				})
				document.body.appendChild(form);
				form.submit();
			},
			cloeQr() {
				this.qrshow = false
				if (this.order_no) {
					uni.showLoading({
						title: this.$t('hhh.t182')
					})
					this.orderstatusPay()
				}
			},
			userInfo() {
				HttpApi.userInfo().then(res => {
					if (res.code === 1) {
						this.$store.commit('setUser', res.data)
					}
				})
			},
			changePay(index) {
				this.payIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.wallet-page {
		.active {
			background-image: url('/static/imgs/chongzhi_on.png');
			background-position: center;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
</style>